<template>
    <div class="search" :style="{height : seachHeight}" @touchmove.prevent>
        <div class="input-part">
            <div :class="{'active':isShow}">
                <input type="text" class="search-input" v-model="seachText" @input="inputText" :placeholder="placeText" @focus="inputfocus" :disabled="!caninput" @keyup.enter="sendData">
                <button class="get-search iconfont icon-sousuo" @touchstart="sendData"></button>
            </div>
            <div class="nav-img" v-if="!isShow"></div>
        </div>
        <button class="remove" v-if="isShow" @touchstart="inputRemove">取消</button>
        <div class="search-list" v-if="isShow">
            <div class="search-history">
                <div class="top">
                    <h3>搜索历史♬</h3>
                    <button @touchstart="clearAll">清空</button>
                </div>
                <ul>
                    <li v-for="item in showArr" :key="item.index" @touchstart="clickSend(item)">{{item}}</li>
                </ul>
                <button class="showMore" @touchstart="showMore">
                    展开更多( •̀ ω •́ )✧
                </button>
            </div>
            <ul class="search-ul" v-if="isList">
                <li class="search-li" v-for="item in mulitmatch" :key="item.id" @touchstart="clickSend(item.keyword)">
                    <i class="iconfont icon-sousuo"></i>
                    <span>{{item.keyword}}</span>
                </li>
            </ul>
            <search-rank v-if="!isList">
                <template v-slot:titleText>
                    热门搜索
                </template>
            </search-rank>
        </div>
    </div>
</template>

<script>
import searchRank from './search-rank.vue';
export default {
  components: { searchRank },
    data(){
        return{
            seachText : "",
            isShow : false,
            isList : false,
            seachHeight : "auto",
            time : null,
            mulitmatch : [],
            placeText : "シネマ",
            inputTime : null ,
            getArr : [],
            showArr : [],
        }
    },
    methods:{
        sendData(){
            if(this.seachText.length === 0) {
                this.$router.push({path: '/Seach/SeachList', query: {"name": this.placeText}});
                this.saveHistory(this.placeText);
                this.isShow = false;
                this.isList = false;
                this.seachHeight = "auto";
                return;
            }
            this.$router.push({path: '/Seach/SeachList', query: {"name": this.seachText}});
            this.saveHistory(this.seachText);
            this.placeText = this.seachText;
            this.seachText = "";
            this.isShow = false;
            this.isList = false;
            this.seachHeight = "auto";
        },
        clickSend(str){
            this.placeText = str;
            this.saveHistory(str);
            this.seachText = "";
            this.isShow = false;
            this.isList = false;
            this.seachHeight = "auto";
            this.$router.push({path: '/Seach/SeachList', query: {"name": str}});

        }
        ,
        inputText(){
            clearTimeout(this.time);
            this.time = setTimeout(()=>{
                this.sendText();
            },200)
        },
        inputRemove(){
             this.seachText = "";
             this.isShow = false;
             this.seachHeight = "auto";
        }
        ,
        sendText(){
            if(this.seachText.length === 0) {
                this.isList = false;
                return;
            }else {
                // axios.defaults.withCredentials = true;
                this.isList = true
                axios.get(`/api/search/suggest?keywords=${this.seachText}&type=mobile`).then(response=>{
                    let arr = [...response.data.result.allMatch];
                    arr.forEach(item=>{
                        item.id = Symbol();
                    })
                    this.mulitmatch = [...arr];

                })
            }
        },
        inputfocus(){
            this.isShow = true
            this.seachHeight = "100%";
        },
        saveHistory(history){
            if(this.showArr.length>20){
                this.showArr.splice(this.showArr.length-1,1);
            }
            
            this.showArr.unshift(history);
            let newset = new Set(this.showArr);
            let newArr = []
            newset.forEach(item=>{
                newArr.push(item)
            })
            this.showArr = [...newArr];
            let str = JSON.stringify(this.showArr);
            localStorage.setItem("seachHistory",str)
        },
        clearAll(){
            this.showArr = [];
            localStorage.setItem("seachHistory",null);
        },
        showMore(){
            if(this.getArr === null){
                return
            }else {
                if(this.getArr.length === 0) {
                    return;
                }else {
                    this.showArr.push(this.getArr.splice(0,this.getArr.length));
                }
            }
        }
    },
    props : {
        caninput : {
            type : Boolean
        }
    },
    created(){
        this.getArr  =JSON.parse(localStorage.getItem("seachHistory"));
        if(this.getArr === null) {
            return;
        }else if(this.getArr.length >= 10 ) {
            this.showArr = this.getArr.splice(0,10);
        }else if(this.getArr.length < 10) {
            this.showArr = this.getArr.splice(0,this.getArr.length);
        }
    }
}
</script>

<style lang="scss" scoped>
    .search {
        width: 100%;
        overflow: hidden;
        position: fixed;
        top: 0rem;
        left: 0rem;
        z-index: 99;
    }

    .input-part {
        width: 100%;
        padding-bottom: 0.5rem;
        background:#33CCBB;
        margin:auto;
        position: relative;
        display: flex;

        .active {
            width: 80%;
        }

        >div {
            width: 60%;
            position: relative;
            padding-left: 0.5rem;
            transition: all 0.25s linear;
        }

        .search-input {
            width: 100%;
            height: 2rem;
            border: 1px solid #ccc;
            border-radius: 5rem;
            padding: 0rem 2rem 0rem 1rem;
            box-sizing: border-box;
            outline: none;
            margin: 0.3rem auto 0rem auto;

            &:focus {
                border: 1px solid rgb(255, 255, 255);
            }
        }

        .nav-img {
            flex: 1;
            background: url(../img/miku.svg) no-repeat center/contain;
            margin-top: 0.3rem;
        }

        .get-search {
            width: 1.5rem;
            height: 1.5rem;
            line-height: 1.5rem;
            position : absolute;
            top: 50%;
            right: 0.6rem;
            background: transparent;
            border: none;
            transform: translateY(-50%);
        }

    }

    .remove {
            position: absolute;
            top: 0rem;
            right: 1rem;
            height: 2.5rem;
            line-height: 2.5rem;
            color: rgb(255, 251, 251);
            border: none;
            background: transparent;
            font-size: 1rem;
        }

    .search-list {
        width: 100%;
        height: 100%;
        margin-top: 1.4rem;
        background: white;
        position: absolute;
        top: 1.4rem;

        >ul {
            width: 90%;
            margin: auto;

            >li {
                width: 90%;
                height: 2rem;
                line-height: 2rem;
                padding: 0.5rem 0rem;
            }
        }
    }

    .search-li {
        display: flex;

        >i {
            width: 2rem;
            height: 2rem;
            text-align: center;
        }

        >span {
            flex: 1;
            border-bottom: 2px dashed #ccc;
            box-sizing: border-box;
            overflow:hidden; //超出的文本隐藏
            text-overflow:ellipsis; //溢出用省略号显示
            white-space:nowrap; //溢出不换行
        }
        

    }
    .search-history {
        width: 100%;
        padding: 0.5rem 1rem;
        box-sizing: border-box;

        h3 {
            font-size: 1.3rem;
            font-weight: bolder;
            margin-bottom: 0.5rem;
        }
        .top {
            display: flex;
            margin-bottom: 0.5rem;

            >h3 {
                font-size: 1.3rem;
                font-weight: bolder;
                flex: 1;
            }

            >button {
                display: block;
                align-self: flex-end;
                color: rgb(161, 161, 161);
                text-align: center;
                border: none;
                background: transparent;
                font-size: 1rem;
            }
        }

        >ul {
            width: 100%;
            display: flex;
            flex-wrap: wrap;

            >li {
                padding: 0.4rem;
                background: rgba(180, 180, 180, 0.5);
                font-size: 0.6rem;
                border: 1px solid #ccc;
                border-radius: 0.5rem;
                margin-left: 1.5rem;
                margin-bottom: 0.5rem;
            }
        }
        >button {
            display: block;
            margin: auto;
            border: none;
            background: transparent;
            color: rgb(161, 161, 161);
        }
    }
</style>